<div
    [hidden]="!show"
    class="modal"
    [ngStyle]="{ width: width, height: height, 'z-index': index }"
    cdkDrag
    [cdkDragFreeDragPosition]="dragPosition"
>
    <div
        class="modal-center"
        appFullscream
        (screen)="fullscreen()"
        (setIndex)="zindex()"
        [ngStyle]="{ width: width, height: height }"
    >
        <div class="modal-main" (mes)="cancel()">
            <div class="modal-right-bottom"></div>
            <div class="modal-top" cdkDragHandle (click)="zindex()">
                <div class="modal-title">{{ title }}</div>
                <div nz-space>
                    <button
                        *nzSpaceItem
                        nz-button
                        nzType="default"
                        nzSize="small"
                        (click)="addTab()"
                    >
                        <i nz-icon nzType="minus" nzTheme="outline"></i>
                    </button>
                    <button
                        *nzSpaceItem
                        nz-button
                        nzType="default"
                        (click)="fullscreen()"
                        nzSize="small"
                    >
                        <i nz-icon nzType="border" nzTheme="outline"></i>
                    </button>
                    <button
                        *nzSpaceItem
                        nz-button
                        nzType="default"
                        nzSize="small"
                        (click)="cancel()"
                    >
                        <i nz-icon nzType="close" nzTheme="outline"></i>
                    </button>
                </div>
            </div>

            <div class="modal-alert">
                <div class="modal-detail-content">
                    <div class="modal-details">
                        <iframe
                            style="position: relative"
                            *ngIf="tabData.length === 1"
                            [src]="tabData[0].url"
                        ></iframe>
                        <div class="modal-tab">
                            <nz-tabset
                                style="height: 100%"
                                nzType="card"
                                *ngIf="tabData.length !== 1"
                            >
                                <nz-tab
                                    *ngFor="let tab of tabData"
                                    [nzTitle]="tab.name"
                                >
                                    <iframe
                                        style="position: relative"
                                        [src]="tab.url"
                                    ></iframe>
                                </nz-tab>
                            </nz-tabset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
